<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" >
     <el-form :inline="true" :model="filters" :size="size" >
        <el-row class="search-input">
          <el-form-item label="商品名称：">
            <el-input v-model="filters.orderNo" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="商家名称：">
            <el-input v-model="filters.storeName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="退货日期：">
            <el-col :span="10">
              <el-date-picker type="date" placeholder="选择日期" v-model="filters.returnDateStart" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line ml10" :span="1">-</el-col>
            <el-col :span="10">
              <el-time-picker placeholder="选择时间" v-model="filters.returnDateEnd" style="width: 100%;"></el-time-picker>
            </el-col>
          </el-form-item>
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage(null)"/>
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')" />
          </el-form-item>
          </el-row>

      </el-form>
    </div>
    <!--<cy-table-->
      <!--:operationWidth='300'-->
      <!--:height="350"-->
      <!--:data="pageResult"-->
      <!--:columns="filterColumns"-->
      <!--:showBatchDelete="false"-->
      <!--:showDeleteOperation="false"-->
      <!--:showSelection="false"-->
      <!--:showDetailOperation="false"-->
      <!--:showEditOperation="false"-->
      <!--:showOperation="false"-->
      <!--@findPage="findPage"-->
      <!--ref="CyTable"-->
    <!--&gt;</cy-table>-->

    <!--表格-->
    <el-table
      :data="tableData"
      style="width: 100%"
      align="center">
      <el-table-column
        prop="productName"
        label="商品名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="productNumber"
        label="商品数量"
        width="180">
      </el-table-column>
      <el-table-column
        prop="returnPrice"
        label="订单金额">
      </el-table-column>
      <el-table-column
        prop="returnDate"
        label="退货日期">
      </el-table-column>

      <el-table-column
        prop="userName"
        label="会员名称">
      </el-table-column>

      <el-table-column
        prop="phone"
        label="会员手机号">
      </el-table-column>

      <el-table-column
        prop="shopName"
        label="店铺名称">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="交易时间">
      </el-table-column>
    </el-table>
    <!--分页器-->
    <el-row class="t_r" >
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="3">
    </el-pagination>
    </el-row>


  </div>
</template>

<script>
import KtButton from "@/views/Core/KtButton"
import CyTable from "@/views/Core/JicTable";
export default {
    components: {
      KtButton,
      CyTable
    },
    data() {
      return {
        tableData:[
          {
            productName:'三只松鼠',
            productNumber:"2",
            returnPrice:"2200",
            returnDate:"2020-01-01",
            userName:"张飞",
            phone:"15555861120",
            shopName:"三只松鼠官方旗舰店",
            createTime:"2020-01-02"
          },
          {
            productName:'周黑鸭',
            productNumber:"2",
            returnPrice:"1000",
            returnDate:"2020-01-08",
            userName:"张飞",
            phone:"15555861120",
            shopName:"周黑鸭官方旗舰店",
            createTime:"2020-01-08"
          },{
            productName:'皮皮虾',
            productNumber:"2",
            returnPrice:"1800",
            userName:"张飞",
            phone:"15555861120",
            returnDate:"2020-02-01",
            shopName:"皮皮虾官方旗舰店",
            createTime:"2020-02-02"
          }
        ],
        currentPage:1,
        filters:{},
        options:[],
        editDialogVisible:false,
        editLoading:false,
        size:"mini",
        columns: [
              {prop: "orderNo", label: "商品名称", minWidth: 180},
              {prop: "orderType", label: "商品数量", minWidth: 100},
              {prop: "orderStatus", label: "订单金额", minWidth: 120},
              {prop: "buyTime", label: "退货日期", minWidth: 130},
              {prop: "userName", label: "会员名称", minWidth: 120},
              {prop: "phone", label: "会员手机号", minWidth: 120},
              {prop: "merchantName", label: "店铺名称", minWidth: 120},
              {prop: "createTime", label: "交易时间", minWidth: 120}
        ],
        filterColumns:[
          {
            orderNo:"三只松鼠",
            orderType:"2",
            orderStatus:"100",
            buyerId:"100",
            buyTime:"2020-01-01",
            actualPayTotalAmount:"三只松鼠",
            payStatus:'2020-01-02'
          }
        ],
        pageRequest: { pageNum: 1, pageSize: 10 },
        pageResult: {},
        dataForm:{},
        dataFormRules:{
           mobile: [{required: true, message: "请输入手机号", trigger: "blur"}],
           nickname: [{required: true, message: "请输入昵称", trigger: "blur"}],
        },
      }
    },
    methods:{

      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
         // 获取分页数据
        findPage: function (data) {
            let this_ = this;
            if (this_.filters == undefined || this_.filters == null) {
                this_.filters = {};
            }
            this_.filters.start = this.pageRequest.pageNum;
            this_.filters.limit = this.pageRequest.pageSize;
            this.utils.request.querySaleOrderReportPage(this_.filters, function (res) {
                if (res.data.rows == null) {
                res.data.rows = [];
                }
                this_.$refs.CyTable.findPage({content:res.data.rows,total:res.data.total});
            });
        },
        //查询后台member表信息
        remoteMethod: function(query) {
          if (query !== "" && query.length>0) {
            //查询后台客户信息
            var search = {};
            search.mobile = query;
            var this_ = this;
            this.utils.request.queryMemberList(search, function(res) {
              this_.options = res.data.rows;
            });
          } else {
            this.options = [];
          }
        },
        //模糊匹配
        choseCustomer: function(selVal) {
          var temp = this.options;
          var this_ = this;
          if (selVal == "" || selVal == null) {
            this_.dataForm.id="";
            this_.dataForm.nickname = "";
            this_.dataForm.mobile = "";
          } else {
            $.each(temp, function(key, val) {
              if (val.id == selVal) {
                this_.dataForm.id = val.id;
                this_.dataForm.nickname = val.nickname;
                this_.dataForm.mobile = val.mobile;
                this_.dataForm = Object.assign({}, this_.dataForm);
                return;
              }
            });
          }
        },
        //设置分销员
        setDis(){
          this.editDialogVisible=true;
        },
        //提交按钮
        submitForm(){
          this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.$confirm("确认提交吗？", "提示", {}).then(() => {
              let params = Object.assign({}, this.dataForm);
              var this_ = this;
              this.utils.request.editDistributorInfo(params, function (res) {
                if (res.code == "0000") {
                  this_.$message({message: "操作成功", type: "success"});

                  this_.editDialogVisible = false;
             
                  this_.findPage(null);
                } else {
                  this_.$message({
                    message: "操作失败, " + res.msg,
                    type: "error"
                  });
                }
              });
            });
          }
        });
      },
        resetForm(formName) {
            if (this.$refs[formName] != undefined) {
                this.$refs[formName].resetFields();
                this.findPage(null);
            }
        },
      // 列表下载
        downloadExcel() {
          this.$confirm('确定下载列表文件?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let filename = "销售订单报表"
            this.$refs.CyTable.exportData(this.filters, this.filterColumns, filename)
          }).catch(() => {

          });
        },
      statusFormat: function(row, column, cellValue, index){
        if(cellValue==10){
          return '已完成'
        }else if(cellValue==1){
          return '待支付'
        }else if(cellValue==2){
          return '已支付'
        }else if(cellValue==3){
          return '待发货'
        }else if(cellValue==4){
          return '已发货'
        }else if(cellValue==5){
          return '确认收货'
        }else if(cellValue==6){
          return '待评价'
        }else if(cellValue==7){
          return '已关闭'
        }else if(cellValue==8){
          return '付款处理中'
        }else if(cellValue==9){
          return '已退款'
        }
      },
      payStatusFormat: function(row, column, cellValue, index){
        if(cellValue==1){
          return '待支付'
        }else if(cellValue==2){
          return '已支付'
        }else if(cellValue==3){
          return '已关闭'
        }else if(cellValue==4){
          return '部分关闭'
        }
      },
      payTypeFormat : function(row, column, cellValue, index){
        if(cellValue==1){
          return '网上支付'
        }else if(cellValue==2){
          return '线下支付'
        }
      },
        handleClose() {
          this.$refs.dataForm.resetFields();
        },
        // 处理表格列过滤显示
        displayFilterColumnsDialog: function() {
            this.$refs.tableColumnFilterDialog.setDialogVisible(true);
        },
        // 处理表格列过滤显示
        handleFilterColumns: function(data) {
            this.filterColumns = data.filterColumns;
            this.$refs.tableColumnFilterDialog.setDialogVisible(false);
        },
        // 处理表格列过滤显示
        initColumns: function() {
            var temp = [];

            $.each(this.columns, function(key, val) {
                temp.push(val);
            });
            this.filterColumns = temp;
        },
    },
    mounted() {
        this.initColumns();
        this.findPage();
        // this.memberTypeLists();
    }
}
</script>

<style scoped lang="scss">
.ml10{
  margin-left: 10px;
}
</style>
